/**
 * VueRouter 的两种参数方式（路由传参）
 *    1. query传参   ？号传参
 *      1. 直接将参数通过 ? 号拼接到 跳转路径上
 *    2. 动态参数传参
 *      1. 需要在 路由规则 设置的地方先通过 :xxx 做好占位，然后直接通过拼接 /xxx 的方式跳转路径。
 *
 * 获取路由传递过来的参数：
 *    前置知识点：
 *      与 Vuex 类似，当我们在项目中使用了 Vuex 之后，所有组件的实例对象上都可以访问到 this.$store 属性
 *      当我们在项目中使用了 VueRouter 之后，所有组件的实例对象上都可以访问到如下两个实例属性：
 *          1. this.$route
 *            当前匹配的路由信息对象，里面有当前路由的路径，query，params 等属性。
 *          2. this.$router
 *            new VueRouter 生成的 路由器实例对象，该对象提供一些方法让我们可以操作路由的跳转等功能。
 *    1. query传递的参数，可以通过 this.$route.query.xxx 获取到
 *    2. 动态参数传递的参数，可以通过 this.$route.params.xxx 获取到
 *
 * RouteLink 组件的 to 属性，除了可以传递字符串的path路径之后，还可以设置成对象（表示一个路由的对象）的方式
 *    to="/hello"
 *    :to="{ path: '/hello' }"
 *
 *    to="/hello?id=100&age=200"
 *    :to="{ path: '/hello', query: { id: 100, age: 200 } }"
 *
 *    {
 *      path: '/hello/:id/:age'
 *    }
 *    to="/hello/100/200"
 *    :to="{ params: { id: 100, age: 200 }, path: '/hello' }"
 *    //上面这行代码是不型的。因为 path 属性与 params 属性不能同时使用，这时可以给 路由设置一个名字，然后通过 name 属性 与 params 属性来配合操作
 *    {
 *      name: 'hello',
 *      path: '/hello/:id/:age'
 *    }
 *    to="/hello/100/200"
 *    :to="{ name: 'hello', params: {id: 100, age: 200} }"
 *
 *
 * 命名路由：
 *    在创建路由的时候，可以设置一个 name 属性，用于表示该路由的名字
 */

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");
